import { PureComponent } from 'react'
import { Input, Select, Button, DatePicker } from 'antd'
import SingleTable from 'components/table/index'
import CostModalFirst from 'components/modal/costModalFirst'
import styles from './costControl.less'
const { Option } = Select
const { RangePicker } = DatePicker
export default class CostControl extends PureComponent{
    state = {
        visible: false
    }
    renderModalFirst(){
        const { visible } = this.state
        return(
            <CostModalFirst
                visible={visible}
                onOk={this.handleOk}
                onCancel={this.handleCancel}
            />
        )
    }
    handleOk = () => {
        this.setState({ visible: false })
    }
    handleCancel = () => {
        this.setState({ visible: false })
    }
    handleAddFirst = () => {
        this.setState({ visible: true})
    }
    render(){
        const columns = [
            {
                key: 'gmtCreate',
                title: '关联单号',
                dataIndex: 'gmtCreate',
                align: 'center',
            },
            {
                key: 'operationTypeName',
                title: '供应商姓名',
                dataIndex: 'operationTypeName',
                align: 'center',
            },
            {
                key: '20',
                title: '类型',
                dataIndex: 'operationTypeName',
                align: 'center',
            },
            {
                key: 'creatorName',
                title: '成本项',
                dataIndex: 'creatorName',
                align: 'center',
            },
            {
                key: '4',
                title: '金额',
                dataIndex: 'creatorName',
                align: 'center',
            },
            {
              key: '5',
              title: '产生时间',
              dataIndex: 'creatorName',
              align: 'center',
            },
            {
                key: '6',
                title: '操作人',
                dataIndex: 'creatorName',
                align: 'center',
            },
            {
                key: '7',
                title: '创建时间',
                dataIndex: 'creatorName',
                align: 'center',
            },
            {
                key: '8',
                title: '编辑',
                dataIndex: 'creatorName',
                align: 'center',
            },
          ]
          const dataList = []
        return(
            <div className={styles.costControl}>
                <div className={styles.costControlBox}>
                    <h2>成本管理</h2>
                </div>
                <div className={styles.costControlSearch}>
                    <div className={styles.costControlSin}>
                        <span className={styles.costControlSpan}>供应商：</span>
                        <Select className={styles.costControlInput}>
                            <Option value="value">value</Option>
                        </Select>
                    </div>
                    <div className={styles.costControlSin} style={{margin: '0 48px'}}>
                        <span className={styles.costControlSpan}>关联单号：</span>
                        <Input className={styles.costControlInput} />
                    </div>
                    <div className={styles.costControlSin}>
                        <span className={styles.costControlSpan}>类型：</span>
                        <Select className={styles.costControlInput}>
                            <Option value="value">value</Option>
                        </Select>
                    </div>
                </div>
                <div className={styles.costControlSearch}>
                    <div className={styles.costControlSin}>
                        <span className={styles.costControlSpan}>产生时间：</span>
                        <RangePicker  style={{width: '220px'}}/>
                    </div>
                    <div className={styles.costControlSin} style={{margin: '0 48px'}}>
                        <span className={styles.costControlSpan}>创建时间：</span>
                        <RangePicker  style={{width: '220px'}}/>
                    </div>
                </div>
                <div className={styles.costControlButton}>
                    <Button type="primary" icon="search">查询</Button>
                    <Button icon="plus" style={{margin: '0 24px'}} onClick={this.handleAddFirst}>墨中舱单成本录入</Button>
                    <Button icon="plus">墨中舱单派送成本录入</Button>
                    <Button icon="export" style={{margin: '0 24px'}}>导出</Button>
                    <Button icon="export">供应商成本导出</Button>


                </div>
                <div className={styles.costControlTable}>
                    <SingleTable
                        data={{ list: dataList }}
                        columns={columns}
                    />
                </div>
                {this.renderModalFirst()}
            </div>
        )
    }
}